<template>
    <div id="barchart">
    </div>
</template>

<script>
import { getStatisticsQuickReport } from '@/api/reportStatistics/index.js'
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
export default {
    props: {
        time: {
            type: Object,
            default: {},
        }
    },
    watch: {
        time(val) {
            this.getData()
        }
    },
    data() {
        return {
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        handleValue() {
            this.getData()
        },
        async getData() {
            const res = await getStatisticsQuickReport(this.time)
            if (res.code == 200) {
                this.init(res.data)
            }
        },
        init(data) {
            let barChart = echarts.init(document.getElementById('barchart'))
            let options = {
                title: {
                    text: '国内地震发生区域统计',
                    x: 'center',
                    y: 0,
                    textStyle: {
                        color: '#fff',}
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '15%',
                    right: '3%',
                    left: '5%',
                    bottom: '16%'
                },
                xAxis: [{
                    type: 'category',
                    data: data.xData,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 2,
                            color: '#EFF1FF'
                        }
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        margin: 10,
                        rotate: '45',
                        interval: 0,
                        color: '#fff',
                        textStyle: {
                            fontSize: 14
                        },
                        formatter: function (value) {
                            if (value.length > 4) {
                                if (value.indexOf('海域') != -1) {
                                    return value.substring(0, 2) + value.substring(value.length - 2, value.length)
                                }
                                return value.substring(0, 2)
                            }
                            return value
                        }
                    },
                }],
                yAxis: [{
                    axisLabel: {
                        formatter: '{value}',
                        color: '#fff',
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#EFF1FF'
                        }
                    }
                }],
                series: [{
                    type: 'bar',
                    data: data.yData,
                    barWidth: '20px',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                if (params.data > 100) {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#FF0000' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#E27272' // 100% 处的颜色
                                    }], false)
                                } else if (params.data > 50) {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#FF623C" // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#FFC53D' // 100% 处的颜色
                                    }], false)
                                } else if (params.data > 10) {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#8676FF' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#76C6FF' // 100% 处的颜色
                                    }], false)
                                } else {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#00B082' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#00FFC8' // 100% 处的颜色
                                    }], false)
                                }
                            },

                            barBorderRadius: [30, 30, 30, 30],
                            shadowColor: '#8676FF',
                            shadowBlur: 4,
                        }
                    },
                }]
            };
            barChart.setOption(options)
        },
    }

}
</script>

<style lang='scss' scoped>
#barchart {
    width: 100%;
    height: 100%;
}
</style>